<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="/image/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迷宫逃脱</title>
    <style>
        /* 全局样式 */
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #282c34;
            color: #fff;
            font-family: Arial, sans-serif;
        }

        h1 {
            margin-bottom: 20px;
        }

        /* 游戏容器 */
        .game-container {
            position: relative;
            width: 400px;
            height: 400px;
            border: 2px solid #61dafb;
            background-color: #1e1e1e;
        }

        /* 迷宫墙壁 */
        .wall {
            position: absolute;
            background-color: #444;
        }

        /* 玩家角色 */
        .player {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #61dafb;
            border-radius: 50%;
            transition: all 0.1s ease;
        }

        /* 出口 */
        .exit {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #4caf50;
            border-radius: 50%;
        }

        /* 计时器 */
        .timer {
            margin-top: 20px;
            font-size: 24px;
        }

        /* 消息提示 */
        .message {
            margin-top: 20px;
            font-size: 24px;
            color: #ff6f61;
        }
    </style>
</head>
<body>
    <h1>迷宫逃脱</h1>
    <div class="game-container" id="game-container">
        <!-- 玩家角色 -->
        <div class="player" id="player"></div>
        <!-- 出口 -->
        <div class="exit" id="exit"></div>
        <!-- 迷宫墙壁 -->
        <div class="wall" style="top: 0; left: 0; width: 400px; height: 20px;"></div>
        <div class="wall" style="top: 0; left: 0; width: 20px; height: 400px;"></div>
        <div class="wall" style="top: 380px; left: 0; width: 400px; height: 20px;"></div>
        <div class="wall" style="top: 0; left: 380px; width: 20px; height: 400px;"></div>
        <div class="wall" style="top: 100px; left: 100px; width: 200px; height: 20px;"></div>
        <div class="wall" style="top: 200px; left: 100px; width: 20px; height: 100px;"></div>
        <div class="wall" style="top: 300px; left: 100px; width: 200px; height: 20px;"></div>
    </div>
    <div class="timer">时间: <span id="timer">0</span> 秒</div>
    <div class="message" id="message"></div>

    <script>
        const gameContainer = document.getElementById('game-container');
        const player = document.getElementById('player');
        const exit = document.getElementById('exit');
        const timerDisplay = document.getElementById('timer');
        const messageDisplay = document.getElementById('message');
        let time = 0;
        let timerInterval;
        let gameActive = true;

        // 初始化玩家和出口位置
        player.style.top = '20px';
        player.style.left = '20px';
        exit.style.top = '360px';
        exit.style.left = '360px';

        // 监听键盘事件
        document.addEventListener('keydown', (e) => {
            if (!gameActive) return;

            let top = parseInt(player.style.top);
            let left = parseInt(player.style.left);

            switch (e.key) {
                case 'ArrowUp':
                    top -= 10;
                    break;
                case 'ArrowDown':
                    top += 10;
                    break;
                case 'ArrowLeft':
                    left -= 10;
                    break;
                case 'ArrowRight':
                    left += 10;
                    break;
            }

            // 检测碰撞
            if (!isColliding(top, left)) {
                player.style.top = `${top}px`;
                player.style.left = `${left}px`;
            }

            // 检测是否到达出口
            if (isExit(top, left)) {
                gameActive = false;
                clearInterval(timerInterval);
                messageDisplay.textContent = `恭喜你逃脱成功！用时 ${time} 秒。`;
            }
        });

        // 检测碰撞
        function isColliding(top, left) {
            const walls = document.querySelectorAll('.wall');
            for (const wall of walls) {
                const wallTop = parseInt(wall.style.top);
                const wallLeft = parseInt(wall.style.left);
                const wallWidth = parseInt(wall.style.width);
                const wallHeight = parseInt(wall.style.height);

                if (
                    top < wallTop + wallHeight &&
                    top + 20 > wallTop &&
                    left < wallLeft + wallWidth &&
                    left + 20 > wallLeft
                ) {
                    return true;
                }
            }
            return false;
        }

        // 检测是否到达出口
        function isExit(top, left) {
            const exitTop = parseInt(exit.style.top);
            const exitLeft = parseInt(exit.style.left);

            return (
                top >= exitTop - 10 &&
                top <= exitTop + 10 &&
                left >= exitLeft - 10 &&
                left <= exitLeft + 10
            );
        }

        // 更新计时器
        function updateTimer() {
            time++;
            timerDisplay.textContent = time;
        }

        // 启动游戏
        function startGame() {
            timerInterval = setInterval(updateTimer, 1000);
        }

        // 初始化游戏
        startGame();
    </script>
</body>
</html>